<template>
  <div class="assess">
    <el-card class="box-card">
      <div class="fixed-head">
        <el-radio-group v-model="type" @change="init">
          <el-radio :label="0">全部</el-radio>
          <el-radio :label="4">好评</el-radio>
          <el-radio :label="3">中评</el-radio>
          <el-radio :label="2">差评</el-radio>
        </el-radio-group>
      </div>
      <div v-loading="loading" class="assess-body">
        <el-empty v-show="assessList.length===0" description="暂无数据" :image-size="200" />
        <el-card v-for="(item,index) in assessList" :key="index" style="margin-top: 10px">
          <div slot="header" class="clearfix">
            <span>用户名：{{ item.customer }}</span>
            <span style="margin-left:20px">评分：</span>
            <el-rate
              v-model="item.score"
              :colors="colors"
              show-score
              text-color="#ff9900"
              disabled
            />
            <span v-if="false">选择服务：{{ item.serviceList }}</span>
            <el-button v-if="isAdmin" style="float: right;padding: 7px 12px;" type="danger" icon="el-icon-delete" />
          </div>
          <div class="assess-content">
            {{ item.content }}
          </div>
          <div class="bottom-date">
            {{ item.date }}
          </div>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getAssess } from '@/api/assess'
import { getOrderInfo } from '@/api/myOrder'
import { getServiceInfo } from '@/api/beautyService'
import { parseTime } from '@/utils/index'
export default {
  name: 'Assess',
  data() {
    return {
      loading: false,
      assessList: null,
      type: 0,
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      value: 1,
      isAdmin: false,
      query: {
        type: 0,
        page: 1,
        pageSize: 3
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      if (this.$store.getters.roles.indexOf('admin') !== -1) {
        this.isAdmin = true
      }
      this.loading = true
      getAssess(this.type).then(res => {
        if (res) {
          const list = res.data.list
          list.forEach(item => {
            item.date = parseTime(item.date, '{y}-{m}-{d}')
          })
          // list.forEach(element => {
          //   this.getService(element.orderId).then(res => {
          //     element.serviceList = res
          //   })
          // })
          this.assessList = list
          this.loading = false
        }
      })
    },
    async getService(id) {
      const res = await getOrderInfo(id)
      const serviceList = res.data.data[0].serviceList
      serviceList.forEach(element => {
        this.getServiceName(element.serviceId).then(res => {
          element.serviceName = res
        })
      })
      // console.log(serviceList)
      // const list = serviceList
      // list.forEach(element => {
      //   console.log(element.serviceName)
      //   service.push(element.serviceName)
      // })
      // console.log('list', list)
      return serviceList
    },
    async getServiceName(id) {
      const res = await getServiceInfo(id)
      return res.data.data.name
    }
  }
}
</script>

<style lang="scss" >
.assess{
  // background: url('../../assets/bg_img/bg1.jpg') no-repeat;
  // background-size: 100% 100%;
  // background-attachment: fixed;
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 670px;
  .box-card{
    width: 60%;
    margin-top: 20px;
    height: 630px;
    > .el-card__body{
      padding: 20px 20px 10px;
    }
    .fixed-head{
      position: fixed;
    }
    .assess-body{
      margin-top: 20px;
      overflow-y: auto;
      height: 587px;
      .assess-content{
        font-size: 13px;
        min-height: 50px;
        text-indent: 2em;
      }
      .bottom-date{
        text-align: right;
        font-size: 12px;
      }
      .el-rate{
        display: inline-block;
      }
    }
  }
}
</style>
